<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认收货页面(卖家发货)</title>
    <!-BootStrap3->
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <style>
        body{
            font-size:12px;
            font-family:Arial;
        }
        div.confirmReceived1{
            max-width: 1013px;
            margin:20px auto;
        }

        div.confirmImage{
            position: relative;
            height:150px;
            text-align: center;

        }

        /*对三个绝对定位的div进行定位*/
        div.confirmPayTime1{
            color:#999999;
            top:100px;
            left:40px;

        }
        div.confirmPayTime2{
            color:#999999;
            top:100px;
            left:240px;
        }
        div.confirmPayTime3{
            color:#999999;
            top:100px;
            left:450px;
        }

        div.aliPayConfirm{
            font-size:16px;
            font-weight: bold;
            padding-bottom: 20px;
            border-bottom: 1px solid #ADC8E6;
        }

        /*具体的订单信息*/
        div.orderInfo span:first-child{
            display: inline-block;
            padding:20px 10px;
            font-size:14px;
        }


        /*table中设置margin不支持，可以在table外套一个div*/
        div.orderInfoTableDiv{
            margin:0px 10px;
        }
        table.orderInfoTable{
            width:100%;
            border:1px solid #d4d4d4;
        }

        table.orderInfoTable thead tr{
            background-color: #E8F2FF;
        }

        table.orderInfoTable th{
            text-align: center;
        }

        table.orderInfoTable td.orderInfoItemFirstTD{
            padding:20px 15px;
        }
        table.orderInfoTable tbody td{
            text-align: center;
        }

        span.orderInfoItemSumPrice{
            color: #999999;
            font-size:18px !important;
            font-weight:bold;
        }
        tr.orderInfoItemTR{
            border-bottom: 1px solid #d4d4d4;
        }

        a{
            color:#999999;
        }
        a:hover{
            color:#c40000;
            text-decoration: none;
        }

        div.confirmPayMoneyDiv{
            margin:20px 20px;
        }
        span.confirmPayMoney{
            color:#c40000;
            font-size:16px;
        }


        div.confirmReceived2{
            max-width: 1013px;
            margin:20px auto;
        }

        div.confirmOrderDetailDiv{
            margin:0px 20px;
            border-top: 1px solid #DDDDDD;
        }

        table.confirmOrderDetailTable{
            width: 100%;
        }

        table.confirmOrderDetailTable td{
            padding:10px 10px;
            color: black;
            font-size:14px;
        }

        /*wangwanggif*/
        span.confirmOrderWangWangGif{
            background-image:url("img/site/wangwang.gif") ;
            display: inline-block;
            width:67px;
            height:22px;
        }


        div.confirmOrderButtonDiv{
            border:1px solid #F58B0F;
            margin:40px 0;
        }
        div.confirmOrderButtonDiv span{
            display: block;
            font-size:18px;
            font-weight: bold;
            color:#c40000;
            margin:20px 80px;
        }
        button.confirmOrderButton{
            margin:20px 80px;
            border:1px solid #F58B0F;
            background-color: #F4A21D;
            color:white;
            width:80px;
            height:40px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <!--确认收货第一阶段(卖家发货)-->
    <div class="confirmReceived1">
        <!--订单的流程和响应的时间-->
        <div class="confirmImage" >
            <img src="img/site/comformPayFlow.png" alt="图片加载失败">
            <!--3个绝对定位的div-->
            <div class="confirmPayTime1" style="position: absolute">2016-09-14 11:14:45</div>
            <div class="confirmPayTime2" style="position: absolute">2016-09-14 11:14:47</div>
            <div class="confirmPayTime3" style="position: absolute">yyyy-MM-dd HH:mm:ss</div>
        </div>

        <!--信息的提示:我已收到货，同意支付宝付款-->
        <div class="aliPayConfirm">我已收到货，同意支付宝付款</div>

        <!--订单信息-->
        <div class="orderInfo">
            <span>订单信息</span>
            <div class="orderInfoTableDiv">
                <table class="orderInfoTable">
                    <!--表头信息：宝贝、单价、数量、商品总价、运费-->
                    <thead>
                        <tr>
                            <th colspan="2">宝贝</th>
                            <th width="120px">单价</th>
                            <th width="120px">数量</th>
                            <th width="120px">商品总价</th>
                            <th width="120px">运费</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--一行表示一个商品-->
                        <tr class="orderInfoItemTR">
                            <td class="orderInfoItemFirstTD">
                                <img class="orderInfoItemImage" width="50px" src="img/site/productSingle_middle/5848.jpg" alt="图片加载失败">
                            </td>
                            <td>
                               <a href="#">罗宾 钢带女表 女士腕表 水钻夜光防水石英表 潮流时尚复古手表女</a>
                            </td>
                            <td><span>￥990.00</span></td>
                            <td><span>1</span></td>
                            <td><span class="orderInfoItemSumPrice">￥990.00</span></td>
                            <td><span>快递 : 0.00</span></td>

                        </tr>

                        <!--一行表示一个商品-->
                        <tr class="orderInfoItemTR">
                            <td class="orderInfoItemFirstTD">
                                <img class="orderInfoItemImage" width="50px" src="img/site/productSingle_middle/5848.jpg" alt="图片加载失败">
                            </td>
                            <td>
                                <a href="#">罗宾 钢带女表 女士腕表 水钻夜光防水石英表 潮流时尚复古手表女</a>
                            </td>
                            <td><span>￥990.00</span></td>
                            <td><span>1</span></td>
                            <td><span class="orderInfoItemSumPrice">￥990.00</span></td>
                            <td><span>快递 : 0.00</span></td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!--实付款-->
        <div class="confirmPayMoneyDiv pull-right">
            <span>实付款：<span class="confirmPayMoney">￥4848.00</span></span>

        </div>

    </div>


    <!--货已收到的确认收货页面-->
    <div class="confirmReceived2">
        <!--显示订单的编号卖家名称收货信息成交时间-->
        <div class="confirmOrderDetailDiv">
            <!--4行2列的表格--->
            <table class="confirmOrderDetailTable">
                <tbody>
                <tr>
                    <td>订单编号:</td>
                    <td>201609141114454899001<img src="img/site/confirmOrderTmall.png"/></td>
                </tr>
                <tr>
                    <td>卖家昵称:</td>
                    <td>天猫商铺<span class="confirmOrderWangWangGif"><!--旺旺的gif图标--></span></td>
                </tr>
                <tr>
                    <td>收货信息:</td>
                    <td>北京市 朝阳区 天安门 4栋二单元 490，朝阳群众， 15800000000，10000 </td>
                </tr>
                <tr>
                    <td>成交时间:</td>
                    <td>2016-09-14 11:14:45</td>
                </tr>
                </tbody>
            </table>
        </div>

        <!--确认支付的按钮div-->
        <div class="confirmOrderButtonDiv">
            <div class="confirmOrderWarning">
                <span>请收到货后，在确认收货！否则您可能钱货两空！</span>
                <button class="confirmOrderButton">确认支付</button>

            </div>

        </div>



    </div>


</body>
</html>